import React, { Component } from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';
import CollapseItem from './CollapseItem'

export class ToastStatus extends Component {
  static displayName = ToastStatus.name;
  constructor(props){
    super(props);
    this.state = {item:[],state_item:{}}
  }
  show(obj){
    const text = obj.target.getAttribute('data');
    switch(text)
    {
      case "online":{
        this.props.video.settype.call(this.props.video,"online");
        this.props.video_infra.settype.call(this.props.video_infra,"online");
        break;
      }
      case "warn":{
        
        break;
      }
      default:{
        this.props.video.settype.call(this.props.video,"offline");
        this.props.video_infra.settype.call(this.props.video_infra,"offline");

        this.props.video.setfile.call(this.props.video,text);
        this.props.video_infra.setfile.call(this.props.video_infra,text);
        
        let state = this.state.state_item;
        Object.keys(state).forEach(t=>{state[t]=(t===text?true:false)});
        this.setState({state:state});
        this.props.chart.setArcData.call(this.props.chart,text);
        break;
      }
    }
  }
  setList(data){
    let item = [];
    item.push(
      <ListGroup key='group'>
        <CollapseItem text='告警状态'>
          <ListGroupItem data="warn" onClick={e=>this.show(e)}>燃弧告警</ListGroupItem>
        </CollapseItem>
        <CollapseItem text='当前状态'>
          <ListGroupItem data="online" onClick={e=>this.show(e)}>列车001-1</ListGroupItem>
          <ListGroupItem data="online" onClick={e=>this.show(e)}>列车001-2</ListGroupItem>
        </CollapseItem>
        <CollapseItem text='历史状态'>
            {
              Object.keys(data).map((k,index)=>{
                return (<CollapseItem text={k} key={index}>
                  {
                    data[k].map((t,o)=>{
                    return  <ListGroupItem 
                              key={o} data={t} 
                              onClick={e=>this.show(e)}
                            >{t.substring(12)}
                            </ListGroupItem>
                    })
                  }
                </CollapseItem>)
              })
            }
        </CollapseItem>
      </ListGroup>)
    return item;
  }
  render () {
    return (
      <div style={{overflow:"scroll",height:'100%'}}>
        {this.state.item}
      </div>
    );
  }
  componentDidMount() {
    this.populateFileData();
  }
  async populateFileData() {
    const response = await fetch('file/getfilelist');
    const data = await response.json();

    let map_item={};
    Object.keys(data).forEach(o=>{
      data[o].forEach(t=>{
        if(this.state.state_item!==undefined && this.state.state_item.hasOwnProperty(t))
          map_item[t] = this.state.state_item[t];
        else
          map_item[t] =false
      });
    });
    this.setState({
      item:this.setList(data),
      state_item:map_item,
    });
  }
}
